<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>首页</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles/common.css">
    <link rel="stylesheet" href="./styles/index.css?v=1.01">
    <link rel="stylesheet" href="./styles/animate.min.css">

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="./js/wow.min.js"></script>
    <script src="./js/common.js?v=1"></script>

</head>
<body>

    <!--<div class="blank40"></div>-->
    <div class="header ">
        <div class="h-content">
            <div class="logo">
                <!--<img src="./images/logo.png" alt="">-->
            </div>

            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li class="nav-product">
                        <a href="#">产品系列</a>
                        <span class="trangle"></span>
                    </li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">配件</a></li>
                    <li><a href="#">新闻资讯</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">APP下载</a></li>
                    <li class="tmall"><a href="#">天猫</a></li>
                </ul>

            </div>
            <div class="child-nav">
                <ul>
                    <li>
                        <span class="title"></span>
                        <img src='./images/nav_pro_1.png' class="product-img" />
                        <span class="type">760T套装系列</span>
                    </li>
                    <li>
                        <span class="title">KKC基础牙刷</span>
                        <img src='./images/nav_pro_2.png' class="product-img" />
                        <span class="type">660系列</span>
                    </li>
                    <li>
                        <span class="title"></span>
                        <img src='./images/nav_pro_3.png' class="product-img" />
                        <span class="type">720系列</span>
                    </li>
                    <li>
                        <span class="title">smart系列</span>
                        <img src='./images/nav_pro_4.png' class="product-img" />
                        <span class="type">591系列</span>
                    </li>
                    <li>
                        <span class="title">KKC KIDS</span>
                        <img src='./images/nav_pro_5.png' class="product-img" />
                        <span class="type">F11H海尔兄弟定制款</span>
                    </li>
                </ul>
            </div>
            <script>
                var nav_handle= null;

                function nav_product_show(){

                    clearTimeout( nav_handle );
                    $('.header').addClass('product-show');

                }

                function nav_product_hide(){

                    clearTimeout( nav_handle );
                    nav_handle = setTimeout(function(){
                        $('.header').removeClass('product-show');
                    },200);

                }

                $('.child-nav,.nav-product').hover(function(){
                    nav_product_show();
                },function(){
                    nav_product_hide();
                });
            </script>
        </div>

    </div>

    <div class="kkc-content banner" >
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./images/banner_1_1920.png" alt="" />
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                <div class="item">
                    <img src="./images/banner_2_1920.png" alt="" />
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                <div class="item">
                    <img src="./images/banner_3_1920.png" alt="" />
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                <div class="item">
                    <img src="./images/banner_4.png" alt="" />
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <script>
        $('.carousel').carousel();
    </script>


    <div class="kkc-content home-layer chongdian">

        <a href="#">
            <img src="./images/home_1.png" alt="">
        </a>
        <div class="text_all">
            <div class="txt_1 wow fadeInUp">KKC电动牙刷591系列</div>
            <div class="txt_2 wow fadeInUp">一年只充 <span class="focus">2</span>次电</div>
            <!--<img class="text_img_2" src="./images/skin/second.png" alt="" >-->
            <div class="txt_3 wow fadeInUp">
                <a href="#" class=" more-button">了解更多</a>
            </div>

        </div>


    </div>

    <div class="kkc-content home-layer video">

        <img src="./images/home_2.png" alt="">
        <a class="text_1 video-action wow fadeInUp"></a>

    </div>

    <div class="kkc-content home-layer app">

        <img src="./images/home_3.png" alt="">

        <div class="text_all">
            <div class="txt_1 wow fadeInUp">APP 语音引导 造你想要</div>
            <div class="txt_2 wow fadeInUp">一支自带语音导航的电动牙刷</div>
            <div class="txt_3 wow fadeInUp">你的牙齿需求，smart系列牙刷全知道</div>
            <a class="txt_4 more-button wow fadeInUp">了解更多</a>
        </div>
    </div>

    <div class="video-room">
        <b class="close_js"><img src="./images/skin/qj-video-close.png" alt=""></b>
        <video src="http://www.oclean.com/one/images/oclean-one-video.mp4"
               controls="controls" autostart="true" preload="load" id="video" width="1280"
               poster="images/oclean-one-video-cover.jpg" class="pv"></video>
    </div>

    <div class="video-mask"></div>

    <script>
        $('.video-room b,.video-mask').click(function(){

            video_room_hide();

        });

        $('.video-action').click(function(){
            video_room_show();
        });
    </script>
    <div class="footer">
        <div class="qrcode">

            <div class="title">关注我们</div>

            <div class="weibo">
                <img src="./images/weibo.png" alt="" class="weibo">
                <span class="name">官方微博</span>
            </div>

            <div class="wechat">
                <img src="./images/wechat.png" alt="" class="wechat">
                <span class="name">官方微信</span>
            </div>

        </div>

        <div class="copyright">

            <div class="language">
                <span class="Chinese">中文</span>
                <span>|</span>
                <span class="English">English</span>
            </div>
            <div class="company">©2019 海尔信息科技（深圳）有限公司  版权所有 鲁ICP备16076508号-1 </div>
        </div>
    </div>


    <script>

        //动画
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: true,
            live: true
        });
        wow.init();

    </script>
</body>
</html>